<template>
  <div class="page-container">
    <!-- 缩放容器：承载所有内容，基于原9600*2240分辨率 -->
    <div class="scale-container">
      <!-- 顶部标题 -->
      <div class="headTitle">{{ headTitle }}</div>
      <div class="headButton" @click="backHome"></div>
      <div class="left1" @click="goToService('yancheng')"></div>
      <div class="right1" @click="goToService('changzhou')"></div>
      <!-- 左边内容 -->
      <div class="left">
        <div class="box">
          <div class="headbox">
            <div class="headImg"></div>
            <div class="title">中汽研汽车检验中心(天津)有限公司</div>
          </div>
          <div class="contentbox">
            <div class="content">
              <img class="img1" src="/imgs/tianjin/home.png" />
              <p class="contentTitle">
                中汽研汽车检验中心（天津）有限公司始（简称天津检验中心）建于1987年，由中国汽车技术研究中心有限公司（简称中汽中心）投资建立，是具有行业影响力的独立第三方汽车产品检测及技术服务机构。
              </p>
            </div>
          </div>
        </div>
        <div class="box2">
          <div class="headbox">
            <div class="headImg"></div>
            <div class="title">组织架构</div>
          </div>
          <div class="contentbox">
            <div class="content">
              <img class="img1" src="/imgs/tianjin/组 7779.png" />
            </div>
          </div>
        </div>
        <div class="box3">
          <div class="headbox">
            <div class="headImg"></div>
            <div class="title">荣誉资质</div>
          </div>
          <div class="contentbox">
            <div class="content1-1">
              <div class="text1">实验室认可与资质认定资质</div>
              <div class="text2">国家轿车质量检验检测中心授权及其资质认定（CMA）</div>
              <div class="text2">国家智能网联汽车质量检验检测中心（天津）授权及其资质认定（CMA）</div>
              <div class="text2">中国合格评定国家认可委员会（CNAS）实验室认可</div>
              <div class="text2">美国A2LA实验室认可</div>
            </div>
            <div class="content1-1">
              <div class="text1">业务领域授权资质</div>
              <div class="text2">工信部道路机动车辆产品准入（公告）检测机构</div>
              <div class="text2">认监委国家强制性产品认证（CCC）指定实验室</div>
              <div class="text2">交通部道路运输车辆达标车型检测机构</div>
              <div class="text2">环保信息公开检测机构</div>
            </div>
            <div class="content1-1">
              <div class="text1">公司荣誉认定</div>
              <div class="text2">工业产品（节能与新能源汽车）质量控制和技术评价实验室</div>
              <div class="text2">工业产品（汽车）质量控制和技术评价实验室</div>
              <div class="text2">工信部产业技术基础公共服务平台</div>
              <div class="text2">国家级高新技术企业</div>
            </div>
          </div>
        </div>
      </div>
      <!-- 中间内容 -->
      <div class="middle">
        <div class="img1"></div>
        <div class="img2"></div>
        <div class="content">
          <div class="years"><span style="font-family: '微软雅黑粗体';">1987</span></div>
          <div class="values">筹建和成立中国汽车质量监督<span style="font-family: '微软雅黑粗体';">检验所</span></div>
        </div>
        <div class="content2">
          <div class="years"><span style="font-family: '微软雅黑粗体';">1995</span></div>
          <div class="values">被国家认监委授权为<span style="font-family: '微软雅黑粗体';">国家轿车质量监督检验中心</span></div>
        </div>
        <div class="content3">
          <div class="years"><span style="font-family: '微软雅黑粗体';">1999</span></div>
          <div class="values">成立<span style="font-family: '微软雅黑粗体';">天津汽车检测中心</span></div>
        </div>
        <div class="content4">
          <div class="years"><span style="font-family: '微软雅黑粗体';">2012</span></div>
          <div class="values"><span style="font-family: '微软雅黑粗体';">新院区实验室</span>投入使用</div>
        </div>
        <div class="content5">
          <div class="years"><span style="font-family: '微软雅黑粗体';">2017</span></div>
          <div class="values"><span style="font-family: '微软雅黑粗体';">改制</span>，更名为中汽研汽车检验中心（天津）有限公司</div>
        </div>
        <div class="content6">
          <div class="years"><span style="font-family: '微软雅黑粗体';">2018</span></div>
          <div class="values">被国家认监委授权为<span style="font-family: '微软雅黑粗体';">国家智能网联汽车质量监督检验中心（天津）</span></div>
        </div>
        <div class="content15">中汽研汽车检验中心(天津)有限公司</div>
        <div class="content18">
          <div class="tubiao1"></div>
          <span class="tubiaoTitle">总投资<span class="tubiaoValue">68</span>亿元</span>
          <div class="tubiao2"></div>
          <span class="tubiaoTitle">实验室建筑面积<span class="tubiaoValue">28</span>万平方米</span>
          <div class="tubiao3"></div>
          <span class="tubiaoTitle">员工总数<span class="tubiaoValue">980</span>余人</span>
          <div class="tubiao4"></div>
          <span class="tubiaoTitle">仪器设备<span class="tubiaoValue">5400</span>余台套</span>
        </div>
        <div class="content19">
          <div class="img1"></div>
          <div class="img2"></div>
          <div class="img3"></div>
          <span class="title">天津</span>
          <div class="pointImg"></div>
          <div class="img4"></div>
          <div class="img5"></div>
          <div ref="lottieRef" class="lottie-box"></div>
        </div>
      </div>
      <!-- 右边内容 -->
      <div class="right">
        <div class="box">
          <div class="headbox">
            <div class="headImg"></div>
            <div class="title">核心业务</div>
          </div>
          <div class="contentbox">
            <module-component :sub-title="'基础业务—整车性能测试'" :fixed-left-items="fixedLeftItems" :content-map="contentMap" />
            <Module :title="`基础业务—节能环保测试`" :navs="techNavs" :contents="techContents" />
            <Module :title="`基础业务—汽车安全测试`" :navs="mediaNavs" :contents="mediaContents" />
            <Module3 :title="`基础业务—系统及部件测试`" :navs="mediaNavs1" :contents="mediaContents1" />
            <Module3 :title="`基础业务—智能网联领域`" :navs="mediaNavs2" :contents="mediaContents2" />
            <module4 :title="`新兴业务—新能源领域`" :navs="mediaNavs3" :contents="mediaContents3" />
          </div>
          <div class="contentbox2">
            <div class="text1">新兴业务—国际化业务</div>
            <div class="text2"><span style="font-family: '微软雅黑粗体';color: #FF830A;">1</span> 子公司+ <span
                style="font-family: '微软雅黑粗体';color: #FF830A;">2</span> 办事处+ <span
                style="font-family: '微软雅黑粗体';color: #FF830A;">8</span> 区域能力：覆盖世界主要出口目的地的海外布局</div>
          </div>
        </div>
        <div class="box3">
          <div class="headbox">
            <div class="headImg"></div>
            <div class="title">科研创新</div>
          </div>
          <div class="contentbox">
            <div class="content1-1">
              <div class="text">天津检验中心聚焦关键核心技术攻关，增强科技自主创新能力。</div>
              <div class="text">承担国家级、省部级、中心等各类科研项目总计<span style="font-family: '微软雅黑';color: #FF830A;">187项</span>
                ，在研总经费<span style="font-family: '微软雅黑';color: #FF830A;">2.3亿元</span>，近三年研发投入增长率保持在
                <span style="font-family: '微软雅黑';color: #FF830A;">40%以上</span>；参与
                <span style="font-family: '微软雅黑';color: #FF830A;">300余项</span>标准制定。近5年获得省部级及以上奖励 <span
                  style="font-family: '微软雅黑';color: #FF830A;">30余项</span>，包括
                <span style="font-family: '微软雅黑';color: #FF830A;">国家科技进步奖、中国专利优秀奖、中国汽车工程学会科技进步特等奖</span>等。
              </div>
            </div>
            <div class="content1-2">
              <div class="text">科研项目</div>
              <div class="img1">
                <div class="img1-1">A类</div>
                <div class="img1-1">B类</div>
                <div class="img1-1">C类</div>
              </div>
              <div class="content1-2-1">
                <div class="text1"><span style="font-family: '微软雅黑';color: #FF830A;">国家、省部级</span>课题</div>
                <div class="text2">面向国家重大战略、践行央企 担当和使命</div>
                <div class="text1"><span style="font-family: '微软雅黑';color: #FF830A;">中心</span>重大专项</div>
                <div class="text2">战略前瞻、“卡脖子”技术</div>
                <div class="text1"><span style="font-family: '微软雅黑';color: #FF830A;">天检</span>自立课题</div>
                <div class="text2">业务孵化、转型升级</div>
              </div>
            </div>
            <div class="content1-3">
              <div class="charts">
                <el-progress type="circle" :percentage="38" width="200" stroke-width="20">
                  <template #default="{ percentage }">
                    <div class="percentage-label">获奖率</div>
                    <div class="percentage-value">{{ percentage }}%</div>
                  </template>
                </el-progress>
              </div>
              <div class="content1-3-1">
                <div class="content1-3-1-1">
                  <div class="text">组织申报外部奖项</div>
                  <div class="text2">47项</div>
                </div>
                <div class="content1-3-1-1">
                  <div class="text">同比增长</div>
                  <div class="text2">47项</div>
                </div>
                <div class="content1-3-1-1">
                  <div class="text">获得外部奖项</div>
                  <div class="text2">21项</div>
                </div>
                <div class="content1-3-1-1">
                  <div class="text">同比增长</div>
                  <div class="text2">63%</div>
                </div>
              </div>
            </div>
            <div class="content1-4">
              <div class="title">天津检验中心近五年获各类科技奖励情况</div>
              <div class="charts" ref="chartRef"></div>
            </div>
            <div class="content1-5">
              <div class="title">重大奖项实现中汽中心<span style="color: #FF830A;font-family: '微软雅黑粗体';">零的突破</span></div>
              <div class="img1"></div>
              <div class="title2">1.国家科技进步奖1项</div>
              <div class="img2"></div>
              <div class="title2">2.中国专利优秀奖1项</div>
              <div class="img3"></div>
              <div class="title2">3.中国汽车工程学会科技进步特等奖1项</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import { ref, onMounted, onUnmounted } from "vue";
import lottie from 'lottie-web';
import Module from './rightModule.vue'; // 引入模块组件
import moduleComponent from './rightModule1.vue'; // 引入模块组件
import Module3 from './rightModule3.vue'; // 引入模块组件
import Module4 from './rightModule4.vue'; // 引入模块组件
import * as echarts from 'echarts'; // 引入ECharts
// 获取图表容器DOM
const chartRef = ref(null);
// 声明图表实例变量
let chartInstance = null;
// 图表配置项（已添加颜色修改）
const option = {
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'cross',
      crossStyle: {
        color: '#999'
      }
    }
  },
  legend: {
    data: ['国家级', '省部级', '行业级'],
    left: 'center',
    textStyle: {
      color: '#FFFFFF',
      fontSize: 20
    },
    itemWidth: 18,
    itemHeight: 18,
    itemGap: 20
  },
  xAxis: [
    {
      type: 'category',
      data: ['2018', '2019', '2020', '2021', '2022'],
      axisPointer: {
        type: 'shadow'
      }, 
      axisLabel: {
        color: '#FFFFFF',
        fontSize: 20,
        margin: 10 // 标签与x轴的距离，增强间距感
      },
      axisLine: {
        show: true,   // 是否显示轴线
        lineStyle: {
          color: '#ccc' // 轴线颜色
        }
      }
    }
  ],
  yAxis: [
    {
      type: 'value',
      name: '单位 : 项',
      min: 0,
      max: 15,
      interval: 5,
      axisLabel: {
        color: '#FFFFFF',
        fontSize: 20,
         formatter: '{value}'
      },
      axisLine: {
        show: true,   // 是否显示轴线
        lineStyle: {
          color: '#ccc' // 轴线颜色
        }
      }
    }
  ],
  series: [
    {
      name: '国家级',
      type: 'bar',
      // 1. 自定义"国家级"柱子颜色
      itemStyle: {
        color: '#65A7E4'
      },
      tooltip: {
        valueFormatter: function (value) {
          return value;
        }
      },
      data: [0, 1, 0, 0, 1]
    },
    {
      name: '省部级',
      type: 'bar',
      // 2. 自定义"省部级"柱子颜色
      itemStyle: {
        color: '#FD8839'
      },
      tooltip: {
        valueFormatter: function (value) {
          return value;
        }
      },
      data: [5, 2, 6, 7, 12],
    },
    {
      name: '行业级',
      type: 'bar',
      // 3. 自定义"行业级"柱子颜色
      itemStyle: {
        color: '#B2B2B2'
      },
      tooltip: {
        valueFormatter: function (value) {
          return value;
        }
      },
      data: [0, 1, 4, 4, 5]
    }
  ]
};
// 初始化图表
const initChart = () => {
  // 确保容器已挂载
  if (chartRef.value) {
    // 初始化图表实例
    chartInstance = echarts.init(chartRef.value);
    // 设置配置项
    chartInstance.setOption(option);
  }
};
// 监听窗口大小变化，自动调整图表尺寸
const handleResize = () => {
  if (chartInstance) {
    chartInstance.resize();
  }
};
// 组件挂载时初始化图表
onMounted(() => {
  initChart();
  // 监听窗口大小变化
  window.addEventListener('resize', handleResize);
});
// 组件卸载时销毁图表（避免内存泄漏）
onUnmounted(() => {
  if (chartInstance) {
    chartInstance.dispose();
    chartInstance = null;
  }
  window.removeEventListener('resize', handleResize);
});

//路由
import { useRouter } from 'vue-router'
const router = useRouter();
const headTitle = ref('中国汽车技术研究中心有限公司数字沙盘')
// 左侧固定按钮文本（不会变化）
const fixedLeftItems = [
  '整车商品性主观评价',
  "轮胎-整车配套关联性测试评价",
  "燃料电池整车关键性能测试评价",
  "智能线控底盘关键性能测试评价",
  "新能源整车性能虚拟仿真及验证平台",
  "整车主动安全性能测试评价"
];
// 右侧内容映射（索引与左侧按钮一一对应）
const contentMap = [
  {
    desc: "牢牢抓住轮胎与整车配套的关联性测试，建立完善的评价体系，覆盖磨损、抓地力、噪音等多维度指标。",
    keyButtons: ["轮胎磨损测试规范", "整车噪音关联分析方法"]
  },
  {
    desc: "围绕主机厂配套选型及磨耗胎性能衰变，搭建完备的“轮胎-整车动力学关联性配套测试评价”规范体系。",
    keyButtons: ["联合国磨耗胎湿抓地全球摸底", "国内第三方最全轮胎测试平台"]
  },
  {
    desc: "围绕国拨及省部级课题，开展不同构型燃料电池系统及整车关键性能、可靠性测试评价。",
    keyButtons: ["FCV关键性能测评技术研究", "典型工况FCV可靠性测试评价"]
  },
  {
    desc: "开展不同构型整车底盘开发验证及对标测评，围绕线控底盘搭建体系化能力。",
    keyButtons: ["线控底盘功能安全测试评价", "线控底盘驾乘性测试评价"]
  },
  {
    desc: "围绕整车操稳动力学及轮胎操稳力学特性，开展主动安全系统整车级测试评价及标准化工作。",
    keyButtons: ["整车操稳动力学测试评价", "整车操稳动力学标准化工作"]
  },
  {
    desc: "测试数据+核心控制模块+自主知识产权，建立中国新能源汽车仿真云平台（优化、标定、预测）。",
    keyButtons: ["性能对标分析与数据挖掘", "系统策略仿真及实车验证"]
  }
];
// 2. 行业技术服务模块数据
const techNavs = ['标准、政策研究', '认证、出口、测评', '科研、正向开发', '后市场自查与监管'];
const techContents = [
  {
    texts: [
      '跟踪研究GRPE、ISO国际标准',
      '支撑国家和北京市排放、能 耗标准、管理政策制修订工作',
      '建立了世界标准对标平台'
    ],
    images: [
      'imgs/tianjin/image40.png',
      'imgs/tianjin/image43.png',
    ]
  },
  {
    texts: [
      '公告、环保、3C',
      '美标、欧标出口',
      '高海拔、运行损失测试',
      'CCRT油耗、能耗、续航测评',
      '数据深度挖掘与利用'
    ],
    images: [
      'imgs/tianjin/image41.png',
      'imgs/tianjin/图片1.png',
    ]
  },
  {
    texts: [
      '中国工况定制化数据采集与深入分析',
      'RDE激烈驾驶、动力总成耐久工况开发',
      '燃油系统正向开发',
      '整车虚拟标定',
    ],
    images: [
      'imgs/tianjin/image44.png',
    ]
  },
  {
    texts: [
      '一致性全过程委托',
      '在用符合性全过程委托',
      'PVE自查',
      '协助主管部门监督抽查',
    ],
    images: [
      'imgs/tianjin/image42.png'
    ]
  }
];
// 3. 传媒信息服务模块数据
const mediaNavs = ['能力范围', '资质授权', '研究平台', '研发业务'];
const mediaContents = [
  {
    texts: [
      '3C/公告类',
      'ECE/GSO/ADR等',
      'FMVSS系列',
      'US-NCAP/IIHS全能力',
    ],
    images: [
      'imgs/tianjin/未标题-1.png'
    ]
  },
  {
    texts: [
      'C-NCAP官方试验室',
      'Euro NCAP联合认可试验室',
      'ASEAN NCAP授权试验室',
      'C-NCAP规则起草、预研',
    ],
    images: [
      // 'imgs/tianjin/image45.jpeg',
      'imgs/tianjin/image46.png',
      'imgs/tianjin/image47.png'
    ]
  },
  {
    texts: [
      'C-NCAP工作组运行',
      '儿童成员保护工作组',
      '虚拟测试工作组',
      '中国工况蜂窝铝研发',
      '数据挖掘、车辆拆解',
    ],
    images: [
      'imgs/tianjin/image58.jpeg',
      'imgs/tianjin/image59.GIF'
    ]
  },
  {
    texts: [
      '翻滚工况约束系统标定',
      '多缸侵入滑台的侧面约束系统开发',
      '被动安全虚拟测评',
      '定制化电池包托底测试',
      '全领域研发验证测试',
    ],
    images: [
      'imgs/tianjin/image48.png',
    ]
  }
];
//第二行第一个
const mediaNavs1 = ['车身六大测试技术平台', '底盘四大测试技术平台'];
const mediaContents1 = [
  {
    texts: [
      '行人保护测评技术平台',
      '先进车身测评技术平台',
      '智能座舱测评技术平台',
      '汽车光学与电器测评技术平台',
      '汽车化学测评技术平台',
      '环境与材料测评技术平台'
    ],
    images: [
      'imgs/tianjin/图片1-1.png',
      'imgs/tianjin/图片2-2.png'
    ]
  },
  {
    texts: [
      '车轮轮胎',
      '制动与转向系统',
      '底盘附件及部件NVH',
      '汽车底盘性能智慧平台',
    ],
    images: [
      'imgs/tianjin/图片3-3.png',
      'imgs/tianjin/图片4-4.png'
    ]
  },
];
//第二行第二个
const mediaNavs2 = ['“四横” 测评体系', '“七纵” 测评体系'];
const mediaContents2 = [
  {
    texts: [
      '法规驱动',
      '测评驱动',
      '认证驱动',
      '研发驱动',
    ],
    images: [
      'imgs/tianjin/image70.png',
      'imgs/tianjin/image75.png'
    ]
  },
  {
    texts: [
      '标准支撑引领',
      '国家级资质',
      '全链测试能力',
    ],
    images: [
      'imgs/tianjin/image71.jpeg',
      'imgs/tianjin/image72.png'
    ]
  }
];
//第二行第三个
const mediaNavs3 = ['燃料电池', '动力电池', '电驱电控', '充电系统', '电磁兼容', '新能源整车'];
const mediaContents3 = [
  {
    texts: [
      '单电池-电池堆-发动机总成-整车',
      '400kW全功率测评能力',
    ],
    images: [
      'imgs/tianjin/image79.png'
    ]
  },
  {
    texts: [
      '符合环保要求全层级“极限工况+热滥用”分析测试',
    ],
    images: [
      'imgs/tianjin/image80.png'
    ]
  },
  {
    texts: [
      '搭载真实部件的高低温测试平台',
      '最丰富的电驱系统测试用例库'
    ],
    images: [
      'imgs/tianjin/image81.jpeg'
    ]
  },
  {
    texts: [
      '全维度多场景充电兼容性测试平台',
      '主流充电桩型号超过130款',
    ],
    images: [
      'imgs/tianjin/image82.jpeg'
    ]
  },
  {
    texts: [
      '专业涉氢安全处理系统的10m法半电波暗室',
      '具备快速搅拌能力的电磁混响室'
    ],
    images: [
      'imgs/tianjin/image83.png'
    ]
  },
  {
    texts: [
      '具备快速搅拌能力的电磁混响室',
      '氢泄露', '氢能耗'
    ],
    images: [
      'imgs/tianjin/imgae84.png'
    ]
  },
];
// 响应式数据
const lottieRef = ref(null);
let animationInstance = null;
// 平台建设数据（包含每个项的背景图路径）
const platformList = ref([
  {
    title: "轻型车排放能耗测试平台建设",
    mainTask: "提升高原轻型车排放测试能力",
    subTasks: [
      "下阶段轻型车高原排放/油耗测试技术规范研究和应用"
    ],
    bgImage: "/imgs/kunming/image67.png"
  },
  {
    title: "发动机性能测试平台建设",
    mainTask: "完善车用发动机排放油耗和高原适应性测评能力",
    subTasks: [
      "传统燃料发动机高原产品适应性研发及测评关键技术研究与应用",
      "氢、氨发动机高原产品适应性研发及测评关键技术研究与应用"
    ],
    bgImage: "/imgs/kunming/image68.png"
  },
  {
    title: "重型车排放能耗测试平台建设",
    mainTask: "拓展高原检测能力，服务行业和政府",
    subTasks: [
      "重型车高原立体海拔实际道路排放测评技术研究与应用",
      "重型车高原转毂性能开发及测评关键技术研究与应用"
    ],
    bgImage: "/imgs/kunming/图片4.png"
  },
  {
    title: "整车性能及高原适应性测试平台建设",
    mainTask: "完善传统业务检测能力，积极开拓整车高原适应性测评项目",
    subTasks: [
      "资质能力建设"
    ],
    bgImage: "/imgs/kunming/image69.png"
  }
]);
// 1. 右侧动态数据（4项，对应4个圆点）
const rightData = ref([
  {
    imageUrl: "/imgs/kunming/image64.png", // 图片路径
    altText: "高原检测技术研讨会", // 图片alt
    description: "每年举办高原检测技术研讨会，引导行业关注高原产品研究"
  },
  {
    imageUrl: "/imgs/kunming/图片3.png", // 图片路径
    altText: "产业发展报告发布",
    description: "发布云南省汽车产业发展报告，为政策制定提供数据支撑"
  },
  {
    imageUrl: "/imgs/kunming/image66.png", // 图片路径
    altText: "机动车一致性检查",
    description: "开展机动车污染物一致性核查，保障排放法规执行"
  },
  {
    imageUrl: "/imgs/kunming/image63.jpeg", // 图片路径
    altText: "新能源汽车论坛",
    description: "举办新能源汽车产业论坛，推动行业交流与合作"
  }
]);
// 2. 状态管理：当前显示项索引（默认第1项）
const currentIndexdot = ref(0);
// 3. 当前显示的数据（计算属性）
const currentItemdot = ref(rightData.value[currentIndexdot.value]);
// 4. 点击圆点切换事件
const handleDotClick = (index) => {
  currentIndexdot.value = index;
  currentItemdot.value = rightData.value[index]; // 更新当前显示的图片和文字
};
// 自动切换定时器
const intervalRefdot = ref(null);
// 自动切换函数
const autoSwitchDot = () => {
  currentIndexdot.value = (currentIndexdot.value + 1) % rightData.value.length;
  currentItemdot.value = rightData.value[currentIndexdot.value];
};

// 组件挂载时启动定时器（5秒切换一次）
onMounted(() => {
  intervalRefdot.value = setInterval(autoSwitchDot, 5000);
});

// 组件卸载时清除定时器
onUnmounted(() => {
  if (intervalRefdot.value) clearInterval(intervalRefdot.value);
});

//左边底部数据1
const leftbottom = ref([
  // 第三组：整车适应性验证测试能力
  {
    mainTitle: "高原整车试验能力",
    subTitle: "整车适应性验证测试能力",
    blueDescriptions: [
      "利用云南特有的立体海拔气候环境和高原山区独特的地理环境，提供“整车环境适应性评价”测试方案；",
      "建立以元江、昆明、香格里拉为“根据地”的测试服务保障基地。"
    ],
    functions: [
      "整车高原适应性测试能力",
      "整车高温适应性测试能力",
      "整车立体海拔测试",
      "整车高原坡起性能测试",
      "技术背书"
    ],
    // imageUrl: "/images/plateau/vehicle-adaptation-main.jpg", // 主图
    imageGrid: [ // 多图网格
      "/imgs/kunming/图片3.png",
      "/imgs/kunming/图片4.png",
    ]
  },
  // 第四组：法规检测能力
  {
    mainTitle: "高原整车试验能力",
    subTitle: "法规检测能力",
    blueDescriptions: [
      "具备国家认可的高原机动车检测资质",
      "覆盖GB、ISO、UN R系列等标准"
    ],
    functions: [
      "整车排放法规检测",
      "动力性能法规测试",
      "环境适应性强制检验",
      "新能源汽车高原专项检测"
    ],
    // imageUrl: "/images/plateau/regulation-test.jpg",
    imageGrid: [
      "/imgs/kunming/图片1.png",
      "/imgs/kunming/图片2.png",
    ]
  }
]);
// 2. 状态管理
const currentIndex = ref(0); // 当前显示项索引
const intervalRef = ref(null); // 定时器引用
// 3. 计算属性：当前显示的项
const currentItem = ref(leftbottom.value[currentIndex.value]);
// 4. 切换逻辑点击切换
const handleClick1 = (index) => {
  currentIndex.value = index;
  currentItem.value = leftbottom.value[index];
  // 重置定时器（点击后重新计时5秒）
  resetInterval();
};
// 自动切换
const autoSwitch = () => {
  currentIndex.value = (currentIndex.value + 1) % leftbottom.value.length;
  currentItem.value = leftbottom.value[currentIndex.value];
};
// 重置定时器
const resetInterval = () => {
  if (intervalRef.value) {
    clearInterval(intervalRef.value);
  }
  intervalRef.value = setInterval(autoSwitch, 5000); // 5秒切换一次
};
// 5. 生命周期管理
onMounted(() => {
  // 初始化定时器
  intervalRef.value = setInterval(autoSwitch, 5000);
});
onUnmounted(() => {
  // 清除定时器，防止内存泄漏
  if (intervalRef.value) {
    clearInterval(intervalRef.value);
  }
});

//左边底部数据2
const leftbottom2 = ref([
  // 第一组：高原排放舱相关
  {
    mainTitle: "轻型车排放试验能力",
    subTitle: "高原排放舱",
    blueDescriptions: [
      "满足GB、EPA、ECE等法规"
    ],
    functions: [
      "轻型车排放/油耗/OBD等试验",
      "电动车续驶里程及能量消耗率试验",
      "混合动力汽车排放和能耗试验",
      "高原条件下环境模拟试验",
      "海外出口高原排放研发标定",
      "国七/欧七/墨西哥等标准测试"
    ],
    imageUrl: "/imgs/kunming/高原排放舱.png",
    imageGrid: [] // 无多图
  },
  // 第二组：高原蒸发及加油排放试验
  {
    mainTitle: "轻型车排放试验能力",
    subTitle: "高原蒸发及加油排放试验",
    blueDescriptions: [
      "满足GB、EPA、CARB、 ECE等法规",
    ],
    functions: [
      "轻型车蒸发、加油排放试验",
      "燃油蒸发系统加速老化试验",
      "碳罐性能试验",
      "蒸发烘烤及燃油系统研发验证"
    ],
    imageUrl: "/imgs/kunming/不同海拔RDE试验.png",
    imageGrid: []
  },
  // 第三组
  {
    mainTitle: "轻型车排放试验能力",
    subTitle: "不同海拔RDE试验",
    blueDescriptions: [
      "不同海拔（0~2400m）RDE测试",
    ],
    functions: [
      "极限条件（高低温、激烈工况）RDE",
      "高原条件下RDE典型工况实验室模拟（可变坡度、高低温）",
      "实际道路路况信息采集",
    ],
    imageUrl: "/imgs/kunming/高原耐久及PVE试验 高原环境模拟试验能力.png",
    imageGrid: []
  },
  // 第四组
  {
    mainTitle: "轻型车排放试验能力",
    subTitle: "高原耐久及PVE试验",
    blueDescriptions: [
    ],
    functions: [
      "高原污染物控制装置耐久性试验",
      "与道路模拟相关的整车性能试验",
      "不同燃料/电控车型PVE试验能力",
    ],
    imageUrl: "/imgs/kunming/高原蒸发及加油排放试验.png",
    imageGrid: []
  },
  // 第五组
  {
    mainTitle: "轻型车排放试验能力",
    subTitle: "高原环境模拟试验能力",
    blueDescriptions: [

    ],
    functions: [
      "-30℃~+60℃环境舱+快慢充电桩",
      "Dewesoft数采+温度/压力等传感器",
      "热平衡/空调/能量流/电平衡等试验",
    ],
    imageUrl: "/imgs/kunming/高原蒸发及加油排放试验.png",
    imageGrid: []
  },
]);
// 2. 状态管理
const currentIndex2 = ref(0); // 当前显示项索引
const intervalRef2 = ref(null); // 定时器引用
// 3. 计算属性：当前显示的项
const currentItem2 = ref(leftbottom2.value[currentIndex2.value]);
// 4. 切换逻辑
// 点击切换
const handleClick2 = (index) => {
  currentIndex2.value = index;
  currentItem2.value = leftbottom2.value[index];
  // 重置定时器（点击后重新计时5秒）
  resetInterval2();
};
// 自动切换
const autoSwitch2 = () => {
  currentIndex2.value = (currentIndex2.value + 1) % leftbottom2.value.length;
  currentItem2.value = leftbottom2.value[currentIndex2.value];
};
// 重置定时器
const resetInterval2 = () => {
  if (intervalRef2.value) {
    clearInterval(intervalRef2.value);
  }
  intervalRef2.value = setInterval(autoSwitch2, 5000); // 5秒切换一次
};
// 5. 生命周期管理
onMounted(() => {
  // 初始化定时器
  intervalRef2.value = setInterval(autoSwitch2, 5000);
});
onUnmounted(() => {
  // 清除定时器，防止内存泄漏
  if (intervalRef2.value) {
    clearInterval(intervalRef2.value);
  }
});

//右边顶部数据1
const rightbottom1 = ref([
  // 第一组：高原排放舱相关
  {
    mainTitle: "发动机试验能力",
    subTitle: "发动机高原性能测评",
    blueDescriptions: [
    ],
    functions: [
      "发动机高原标定（1914米）",
      "发动机0-5000米进排气海拔模拟标定",
      "发动机净功率试验",
      "发动机性能试验",
      "发动机国五、国六排放循环测试",
      "发动机非三、非四排放循环测试",
      "发动机中国工况高原研究"
    ],
    imageUrl: "/imgs/kunming/发动机高原性能测评.png",
    imageGrid: [] // 无多图
  },
  // 第二组：高原蒸发及加油排放试验
  {
    mainTitle: "发动机试验能力",
    subTitle: "重型车高原性能测评",
    blueDescriptions: [
    ],
    functions: [
      "重型车高原OBD测试",
      "高原烟度排放测试",
      "高原环境DPF累碳测试",
      "高原山区长上/下坡OBD验证",
      "立体海拔环境下整车PEMS测试",
      "发动机台架（重型车）比对验证及开发",
    ],
    imageUrl: "/imgs/kunming/重型车高原性能测评.png",
    imageGrid: []
  },
  // 第三组
  {
    mainTitle: "发动机试验能力",
    subTitle: "非道路移动机械高原性能测评",
    blueDescriptions: [
      "具备开展不同海拔下的非道路移动机第三、四阶段排气烟度、实际道路污染物排放试验测试及评价能力。",
    ],
    functions: [
      "发动机台架测试",
      "烟度测试",
      "不同海拔PEMS及高原适应性开发试验",
    ],
    imageUrl: "/imgs/kunming/非道路移动机械高原性能测评.png",
    imageGrid: []
  },
  // 第四组
  {
    mainTitle: "发动机试验能力",
    subTitle: "高原测试方法和标准研究",
    blueDescriptions: [
      "下阶段排放标准预研，牵头高海拔排放工作组，开展重型车、非道路移动机械、发动机高海拔测试方法和标准研究。"
    ],
    functions: [
      "PEMS设备高原使用要求",
      "OBD高原测评",
      "海拔模拟装置对发动机及测试系统要求的相关经验分享",
      "国七/T五标准预研",
    ],
    imageUrl: "/imgs/kunming/高原测试方法和标准研究.png",
    imageGrid: []
  },
  // 第五组
  {
    mainTitle: "发动机试验能力",
    subTitle: "不同海拔工程机械PEMS及高原适应性开发试验",
    blueDescriptions: [

    ],
    functions: [
      "海拔高度：1700m、1900m、2400m、3200m、3900-4300m",
      "试验项目：PEMS、高原适应性开发及研发验证试验",
    ],
    imageUrl: "/imgs/kunming/不同海拔工程机械PEMS及高原适应性开发试验.png",
    imageGrid: []
  },
]);
// 2. 状态管理
const currentIndex3 = ref(0); // 当前显示项索引
const intervalRef3 = ref(null); // 定时器引用
// 3. 计算属性：当前显示的项
const currentItem3 = ref(rightbottom1.value[currentIndex3.value]);
// 4. 切换逻辑点击切换
const handleClick3 = (index) => {
  currentIndex3.value = index;
  currentItem3.value = rightbottom1.value[index];
  // 重置定时器（点击后重新计时5秒）
  resetInterval3();
};
// 自动切换
const autoSwitch3 = () => {
  currentIndex3.value = (currentIndex3.value + 1) % rightbottom1.value.length;
  currentItem3.value = rightbottom1.value[currentIndex3.value];
};
// 重置定时器
const resetInterval3 = () => {
  if (intervalRef3.value) {
    clearInterval(intervalRef3.value);
  }
  intervalRef3.value = setInterval(autoSwitch3, 5000); // 5秒切换一次
};
// 5. 生命周期管理
onMounted(() => {
  // 初始化定时器
  intervalRef3.value = setInterval(autoSwitch3, 5000);
});
onUnmounted(() => {
  // 清除定时器，防止内存泄漏
  if (intervalRef3.value) {
    clearInterval(intervalRef3.value);
  }
});

// 2. 响应式状态：当前页码（0-2，对应3页内容）
const currentPage = ref(0);
// 3. 自动轮播定时器
let timer = null;
// 1. 响应式数据（支持动态更新）
const statsData = ref([
  {
    icon: '/imgs/shanghai/组 7752 拷贝 3(1).png', // 平均年龄图标
    label: '平均年龄',
    value: 33,
    unit: '岁',
  },
  {
    icon: '/imgs/shanghai/组 7752 拷贝 17(1).png', // 平均工作年限图标
    label: '平均工作年限',
    value: 9,
    unit: '年',
  },
  {
    icon: '/imgs/shanghai/组 7752 拷贝 16.png', // 硕士学历占比图标
    label: '硕士学历占比',
    value: 64,
    unit: '%',
  },
  {
    icon: '/imgs/shanghai/组 7752 拷贝 17.png', // 海外人才占比图标
    label: '海外人才占比',
    value: 20,
    unit: '%',
  }
]);
// 切换到指定页
const handleClick9 = (index) => {
  currentPage.value = index;
  resetTimer(); // 点击后重置定时器，避免立即自动切换
};
//跳转路由
const backHome = () => {
  router.push({ name: 'home' })
}
// 切换到下一页（循环）
const goToNextPage = () => {
  currentPage.value = (currentPage.value + 1) % pages.length;
};
// 重置定时器
const resetTimer = () => {
  clearInterval(timer);
  timer = setInterval(goToNextPage, 5000); // 5秒切换一次
};
//顶部第一块内容
const pages = [
  // 第1页内容
  {
    btnName: '国家技术标准创新基地（汽车）服务中心',
    text: '立足国际标准协同与产业赋能目标，依托国际标准合作机制，以实体化创新基地为载体，面向车企、科技公司、初创企业客户，围绕智能驾驶、数据安全、海外市场拓展场景，开展标准研究、成果展示、全链条服务，助力企业降低国际合规成本、缩短国际认证周期，优先进入全球供应链。',
    btnText: '协同网络',
    items: ['国内外车企', '科研机构', '标准化组织', '地方政府'],
    imgUrl: '/imgs/shanghai/1.png' // 第1页图片
  },
  // 第2页内容（结构不同：文本、项目、图片均不同）
  {
    btnName: 'C-ASAM 国际标准组织服务',
    text: 'C-ASAM 为会员单位提供智能网联汽车标准制定与研发领域国际化会员服务，包括但不限于下载和使用 ASAM 所有标准与白皮书、参加 ASAM 活动与标准制定项目、ASAM 年度奖项评选推荐、ASAM 标准进展报告等。另外，结合本土产业优势，为会员单位提供专题研究及咨询增值服务等内容',
    btnText: '',
    items: ['全球400+ 会员', '中国唯一官方代表单位', '国际标准制定与转化', '汽车供应链管理', '汽车产业专业标准'],
    imgUrl: '/imgs/shanghai/2.png' // 第2页图片
  },
  // 第3页内容（结构不同）
  {
    btnName: '职业技能标准服务能力',
    text: '基于对汽车服务全产业链职业技能的逐级解构，建立可量化、可认证、可追溯的岗位能力模型与培养路径。该体系依托中国机械工业教育协会、汽车人才培养基地生态联盟成员单位等，针对汽车领域产业链的实际用人需求，结合科研院所、高等院校、职业学院、技工院校等对应专业（方向）的人才培养规律，开发定制化课程教学资源，以满足人才供给与人才需求的紧密对接。',
    btnText: '',
    items: [''],
    imgUrl: '/imgs/shanghai/3.png' // 第3页图片
  }
];
// 2. 响应式状态：当前页码（0-4，对应5页内容）
const currentPage2 = ref(0);
// 3. 自动轮播定时器
let timer2 = null;
// 切换到指定页
const handleClick6 = (index) => {
  currentPage2.value = index;
  resetTimer2(); // 点击后重置定时器，避免立即自动切换
};
// 切换到下一页（循环）
const goToNextPage2 = () => {
  currentPage2.value = (currentPage2.value + 1) % pages2.length;
};
// 重置定时器
const resetTimer2 = () => {
  clearInterval(timer2);
  timer2 = setInterval(goToNextPage2, 5000); // 5秒切换一次
};
//底部第一块数据
const pages2 = [
  {
    btnName: '汽车数据跨境流通合规服务',
    text: '立足中国汽车产业全球化合规运营目标，我们以动态合规风险管理模型为内核，搭载 SaaS 订阅平台，整合“法规检查库 + 规则库 + 风险库 + 方案库”四大产品矩阵（含全球法规库作为基础支撑模块），联合法律政策与 AI 算法双引擎团队，为出海车企及生态伙伴提供覆盖数据跨境、本地化雇佣、认证合规的全链路服务。依托《临港新片区数据跨境流动分类分级管理办法（试行）》标准，已落地智能网联汽车等重要数据目录编制，提供政策咨询、场景评估等专项服务；同步开发重要数据识别、跨境安全评估等功能模块，实现中国与海外汽车数据双向安全流通。从标准到落地，从评估到实施，助力企业降本增效，让合规成为国际化发展助推器。',
    items: ['国家级标准背书', '合规一站式服务', '跨境法规数据', '出境标准体系'],
    imgUrl: '/imgs/shanghai/4.png'
  },
  {
    btnName: '中国汽车数据出境指导服务',
    text: '依托汽车数据跨境流动合规平台，为中国汽车企业提供全链路数据出境合规指导服务。 通过场景化数据清单精准定位出境范围，集成安全防护工具筑牢数据屏障，实时监测 流通动态确保可追溯，定制分层培训强化内生合规力，并整合国际规则库适配出海需 求。覆盖“识别 - 防护 - 流通 - 提升 - 对接”全周期，助力企业高效应对国内外监管， 平衡国内安全与国际规则，为中国汽车全球化发展守好数据安全关。',
    items: ['全链路支撑', '实时动态监管', '政企协同服务', '多维安全管理'],
    imgUrl: '/imgs/shanghai/5.png'
  },
  {
    btnName: '汽车研发性能数据技术服务',
    text: '围绕主机厂和设计公司在整车规划、车型定位和开发目标定义的对标数据需求，开展汽车性能数据积累、研究、分析、销售工作，构建国内外唯一覆盖乘用车、商用车及零部件全专业性能及结构数据的平台，高效支撑整车和零部件的产品规划与开发。',
    items: ['数据全景智核', '数据共建共享', '全周期服务覆盖'],
    imgUrl: '/imgs/shanghai/6.png'
  },
  {
    btnName: '汽车新生态产业链数据服务',
    text: '立足产业链精准协同与技术创新目标，开展互联网推广、互联网接口、数据传输等服务，以线上数字化平台 + 线下创新生态圈为载体，整合全球供应商及采购资源，实现最新创新技术发布，供需精准匹配、技术品牌营销、市场分析咨询等功能矩阵，促进 整零交流与价值链整合开放创新，为打造汽车新生态产业链提供综合数据服务。',
    items: ['多商城矩阵B2B 订货商城、跨境出口商城等', '直连全球供应商与多资源整合采购资源等', '多领域赋能技术、流量资金等'],
    imgUrl: '/imgs/shanghai/7.png'
  },
  {
    btnName: '汽车运管数据资源交易服务',
    text: '基于中汽中心牵头成立的智能新能源汽车数据产业联盟，搭建汽车运管数据资源交易平台，通过整合行业组织、海外海关、地方新能源汽车数据平台、企业平台等数据资源，构建全球汽车数据产品聚集地，为数据生产商、数据贸易商、数据加工商及数据应用商提供合规、权威、多样的数据产品。',
    items: ['权威国内外多源数据要素集', '数据要素融合智能装备', '汽车技术可信空间技术基座'],
    imgUrl: '/imgs/shanghai/8.png'
  }
];
// 2. 响应式状态：当前页码（0-2，对应3页内容）
const currentPage3 = ref(0);
// 3. 自动轮播定时器
let timer3 = null;
// 切换到指定页
// const handleClick3 = (index) => {
//     currentPage3.value = index;
//     resetTimer3(); // 点击后重置定时器，避免立即自动切换
// };
// 切换到下一页（循环）
const goToNextPage3 = () => {
  currentPage3.value = (currentPage3.value + 1) % pages3.length;
};
// 重置定时器
const resetTimer3 = () => {
  clearInterval(timer3);
  timer3 = setInterval(goToNextPage3, 5000); //5秒切换一次
};
//底部第二块内容
const pages3 = [
  // 第1页内容
  {
    btnName: '国产碰撞假人系列产品',
    text: '碰撞假人是汽车安全及技术标准体系的核心装备。为了攻关汽车安全领域“卡脖子技术”装备，自主创新中国化安全标准体系，中汽中心打造形成了集核心技术、关键装备、系统集成、检验检测自主可控的技术体系。中汽中心完全自研生产的中国体征假人后续将应用于 C-NCAP ，国产化 - 混Ⅲ系列碰撞假人 H Ⅲ -5、H Ⅲ -50、H Ⅲ -95 在性能、质量、外观全面对标国外同等品牌。目前国产碰撞假人已在多个国家级检测机构、主机厂、零部件厂商的相关法规试验中实际应用。',
    btnText: '协同网络',
    items: ['完全自主研发成本自主可控', '中国体征特色突破“卡脖子”'],
    imgUrl: '/imgs/shanghai/8.png' // 第1页图片
  },
  // 第2页内容（结构不同：文本、项目、图片均不同）
  {
    btnName: '高端自研国产测试装备',
    text: '在前沿标准与测评技术的指导下，立足于行业权威的检测技术与测试经验，履行行业职责，解决汽车行业在高端测试装备领域“技术垄断、成本控制、产业链安全”等痛点，在主被动安全、新能源、智能网联、节能环保等领域打造精准、可靠、领先的测试工具与配套服务',
    btnText: '',
    items: ['行业平台支撑示范应用先行', '先进技术赋能互动合作共赢'],
    imgUrl: '/imgs/shanghai/9.png' // 第2页图片
  },
  // 第3页内容（结构不同）
  {
    btnName: '充电性能兼容验证方案',
    text: '中汽科技（上海）与宁德时代科技联合开发的充电性能兼容验证方案，集交流和直流测试于一体，兼容了全球主流的充电标准，为客户提供标准充放电测试、自定义开发测试和海量中外案例库测试研究。主要针对开发验证不充分、案例少、开源度差、标准迭代升级快等问题，提供一整套高开放性和高集成度的解决方案。',
    btnText: '',
    items: ['样例测试丰富', '参数灵活可调', '法规应对及时', '欧标摸底应对'],
    imgUrl: '/imgs/shanghai/10.png' // 第3页图片
  }
];
// 2. 响应式状态：当前页码（0-2，对应3页内容）
const currentPage4 = ref(0);
// 3. 自动轮播定时器
let timer4 = null;
// 切换到指定页
const handleClick4 = (index) => {
  currentPage4.value = index;
  resetTimer4(); // 点击后重置定时器，避免立即自动切换
};
// 切换到下一页（循环）
const goToNextPage4 = () => {
  currentPage4.value = (currentPage4.value + 1) % pages4.length;
};
// 重置定时器
const resetTimer4 = () => {
  clearInterval(timer4);
  timer4 = setInterval(goToNextPage4, 5000); //5秒切换一次
};
//底部第二块内容
const pages4 = [
  // 第1页内容
  {
    btnName: '汽车先进功能验证服务',
    text: '以进一步落实华东一体化协同发展，彰显“高端技术枢纽”定位为目标，依托标准法规和 C-NCAP、C-ICAP 等测评体系打造智行、智泊、智舱三大核心产品服务能力。团队成立以来，每年完成汽车功能验证项目几十项，服务客户二十余家。面向整车制造商、技术方案解决商、零部件配套企业等全产业链，围绕封闭场地、公开道路、座舱大模型等业务场景，为行业提供从“技术标定”到“场景验证”的一体化技术解决方案，致力于成为华东地区领先、全国一流的汽车先进功能验证服务商。',
    btnText: '',
    items: ['标准化设备与场地', '20+核心客户群体', '华东一站式解决方案'],
    imgUrl: '/imgs/shanghai/12.png' // 第1页图片
  },
  // 第2页内容（结构不同：文本、项目、图片均不同）
  {
    btnName: '汽车产品技术咨询服务',
    text: '锚定“区城性汽车智库 + 高端技术枢纽 " 双定位，围绕“车路云一体化”规划建设、系统验证、场景落地等核心业务，组建一站式服务团队，打造“车路云一体化”咨询规划、产品验证两大服务能力，为行业提供从规划、建设到验证的一体化技术解决方案，致力于成为政企合作标杆，为行业发展提供关键力量。目前已服务多地政府及示范区，包括克拉玛依市车路云数字化综合服务项目、上海市奉贤区示范区车路协同应用建设项目等。',
    btnText: '',
    items: ['规划建设', '系统验证', '场景落地'],
    imgUrl: '/imgs/shanghai/13.png' // 第2页图片
  },
  // 第3页内容（结构不同）
  {
    btnName: '汽车国际化全链路服务',
    text: '以构建汽车先进技术产业生态、推动行业规范化发展为目标，依托国家级试点示范区运营经验，凭借产业政策研究、标准体系构建、示范区建设与运营等核心能力，面向各地方政府提供 “政策研究 - 标准制定 - 区域协同” 全链条咨询服务。团队汇聚行业专家，具备从顶层设计、场景规划到落地运营的系统化服务能力。已服务超 10 家政府部门，协助修订《上海市汽车智能化测试与示范实施办法》等 20 余项政策文件，助力长三角建立测试牌照互认机制，推动超 10 个跨区域商业化项目落地，覆盖 5000 公里测试道路资源，以政策精准化、产业规范化、生态协同化路径加速各地方汽车智能化与网联化商业化进程。',
    btnText: '',
    items: ['全国首创', '权威背书', '专家团队', '项目遍布全国', '成果导向'],
    imgUrl: '/imgs/shanghai/14.png' // 第3页图片
  }
];
// 2. 响应式状态：当前页码（0-2，对应3页内容）
const currentPage5 = ref(0);
// 3. 自动轮播定时器
let timer5 = null;
// 切换到指定页
const handleClick5 = (index) => {
  currentPage5.value = index;
  resetTimer5(); // 点击后重置定时器，避免立即自动切换
};
// 切换到下一页（循环）
const goToNextPage5 = () => {
  currentPage5.value = (currentPage5.value + 1) % pages5.length;
};
// 重置定时器
const resetTimer5 = () => {
  clearInterval(timer5);
  timer5 = setInterval(goToNextPage5, 5000); //5秒切换一次
};
//底部第二块内容
const pages5 = [
  // 第1页内容
  {
    btnName: '汽车国家职业数字展馆服务',
    text: '以产业需求为导向，通过整合产业资源、教育资源和评价资源，打造科学、专业、全面的汽车行业职业解读与职业规划的数字化平台，推动“岗位标准共建 - 课程资源开发-技能认证落地”的全链路协作，探索“产教评”深度融合，推进产业人才培养精准化、就业指导精细化和供需对接高效化，助力汽车企业从“人才需求方”转变为“人才定义者与培养者”。',
    btnText: '',
    items: ['国家级平台', '20+品牌形象与雇主价值传播', '人才标准领航', '产教评闭环生态'],
    imgUrl: '/imgs/shanghai/15.png' // 第1页图片
  },
  // 第2页内容（结构不同：文本、项目、图片均不同）
  {
    btnName: '汽车产教评一体化平台服务',
    text: '汽车产教评一体化平台服务聚焦产业人才培养中“岗位能力与系统需求错位、教育供给与产业需求脱节、人才转型评价体系僵化”三大痛点，以多方协同与供需适配机制为核心，赋能政企校行主体，贯穿人才“引用育留”全流程。平台深度整合 AI 能力，实现精准岗位匹配、个性化成长导航与动态能力评估，构建产教评深度融合的全链条培养新范式，驱动产业人才精准化培养与生态协同化发展。',
    btnText: '',
    items: ['AI全链条人才精准匹配', '政企校行协同生态平台', '产教评三维融合新范式'],
    imgUrl: '/imgs/shanghai/16.png' // 第2页图片
  },
  // 第3页内容（结构不同）
  {
    btnName: '高技术及高等学历教育服务',
    text: '依托国内外顶尖高校资源与行业领军专家团队，面向企业科技骨干、技术管理人员及高层次人才，聚焦战略性前瞻技术领域，打造覆盖高技术能力提升与高学历深造的全链条培养服务体系，帮助学员实现职业技能与学术能力的双重突破，全面增强企业在技术创新、战略布局和人才梯队建设方面的综合竞争力。',
    btnText: '',
    items: ['权威师资力量', '顶尖高校资源', '实战导向培养', '灵活学习机制'],
    imgUrl: '/imgs/shanghai/17.png' // 第3页图片
  },
  // 第4页内容（结构不同）
  {
    btnName: '国内外高技能人才培养服务',
    text: '构建基于标准化、面向国际化、覆盖产业链的汽车领域高技能人才培养体系，依托国内汽车人才培养基地生态联盟与海外“智车学堂”人才培养认证联盟的合作形式，针对紧密贴合产业企业用人实际需求的线上线下各类教学资源实施整合，旨在面向院校师生与企业技能人才，聚焦智能网联汽车、新能源汽车等前沿岗位，提供集理论培训、实操教学、岗位考核、能力评价于一体的全流程职业技能提升服务。',
    btnText: '',
    items: ['数字化结合实践灵活培训形式', '精准对接技能人才培养供给', '“中文 + 技能”助力产业链出海'],
    imgUrl: '/imgs/shanghai/18.png' // 第4页图片
  }

];
// 初始化 Lottie 动画
const initLottieAnimation = () => {
  if (lottieRef.value) {
    animationInstance = lottie.loadAnimation({
      container: lottieRef.value,
      path: '/animations/tianjinnewenergy.json',
      loop: true,
      autoplay: true,
    });
  }
};
//跳转路由
const goToService = (item) => {
  router.push({ name: item })
}
onMounted(() => {
  timer = setInterval(goToNextPage, 5000);
  timer2 = setInterval(goToNextPage2, 5000);
  timer3 = setInterval(goToNextPage3, 5000);
  timer4 = setInterval(goToNextPage4, 5000);
  timer5 = setInterval(goToNextPage5, 5000);
  initLottieAnimation();
})
// 组件销毁时清除定时器（防止内存泄漏）
onUnmounted(() => {
  clearInterval(timer);
  clearInterval(timer2);
  clearInterval(timer3);
  clearInterval(timer4);
  clearInterval(timer5);
});
</script>
<style scoped>
.left1 {
  z-index: 999;
  cursor: pointer;
  top: 45%;
  left: 10px;
  position: absolute;
  width: 94px;
  height: 258px;
  background-image: url("/imgs/home/left1.png");
  background-position: left;
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

.right1 {
  z-index: 999;
  cursor: pointer;
  position: absolute;
  top: 45%;
  right: 10px;
  width: 94px;
  height: 258px;
  background-image: url("/imgs/home/right1.png");
  background-position: left;
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

@keyframes sweep {
  0% {
    background-position: -100%;
  }

  100% {
    background-position: 200%;
  }
}

/* 上下浮动动画 */
@keyframes floatUpDown {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-20px);
    /* 向下移动20px */
  }
}

/* 可视区域容器：固定为目标分辨率6240*1456 */
.page-container {
  width: 6240px;
  height: 1456px;
  overflow: hidden;
  position: relative;
  margin: 0 auto;
}

/* 原始设计稿容器：基于9600*2240，通过缩放适配新分辨率 */
.scale-container {
  width: 9600px;
  height: 2240px;
  transform: scale(0.65);
  transform-origin: 0 0;
  position: relative;
}


.lottie-box {
  z-index: 99;
  position: absolute;
  left: 962px;
  top: 371px;
  width: 885px;
  height: 889px;
  font-size: 80px;
}

.headTitle {
  text-align: center;
  position: relative;
  top: -24px;
  font-size: 130px;
  font-family: YouSheBiaoTiHei;
  font-weight: 400;
  color: #FFFFFF;
  background: linear-gradient(0deg, rgba(0, 216, 255, 0.66) 10%, rgba(255, 255, 255, 1) 70%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.headButton {
  cursor: pointer;
  display: flex;
  float: inline-end;
  justify-content: center;
  align-items: center;
  position: absolute;
  bottom: 20px;
  right: 20px;
  width: 78px;
  height: 78px;
  background-image: url("/imgs/ningbo/cancel.png");
  background-position: left;
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

.left {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  width: 4000px;

  .box {
    margin-left: 140px;
    display: flex;
    flex-direction: column;

    .headbox {
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      width: 1446px;
      height: 168px;
      background-image: url("/imgs/ningbo/t(1).png");
      background-position: left;
      background-size: 100% 100%;
      background-repeat: no-repeat;

      .headImg {
        margin-left: 220px;
        margin-top: 41px;
        width: 53px;
        height: 58px;
        background-image: url("/imgs/ningbo/菱形 拷贝.png");
        background-position: left;
        background-size: 100% 100%;
        background-repeat: no-repeat;
      }

      .title {
        margin-left: 30px;
        margin-top: 22px;
        height: 49px;
        font-family: "微软雅黑粗体";
        font-weight: 400;
        font-size: 57px;
        color: #FFFFFF;
      }
    }

    .contentbox {
      display: flex;
      flex-direction: row;

      .content {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: flex-start;
        width: 1476px;
        height: 1096px;
        background-image: url("/imgs/ningbo/矩形 933 拷贝 3.png");
        background-position: left;
        background-size: 100% 100%;
        background-repeat: no-repeat;

        .img1 {
          width: 1407px;
          height: 646px;
        }

        .contentTitle {
          padding: 0 20px;
          text-align: justify;
          text-justify: inter-ideograph;
          position: relative;
          line-height: 60px;
          top: -12px;
          text-indent: 3.5ch;
          width: 1356px;
          font-family: "微软雅黑常规";
          font-weight: 400;
          font-size: 40px;
          color: #FFFFFF;
        }
      }
    }
  }

  .box2 {
    display: flex;
    flex-direction: column;

    .headbox {
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      width: 1446px;
      height: 168px;
      background-image: url("/imgs/ningbo/t(1).png");
      background-position: left;
      background-size: 100% 100%;
      background-repeat: no-repeat;

      .headImg {
        margin-left: 220px;
        margin-top: 41px;
        width: 53px;
        height: 58px;
        background-image: url("/imgs/ningbo/菱形 拷贝.png");
        background-position: left;
        background-size: 100% 100%;
        background-repeat: no-repeat;
      }

      .title {
        margin-left: 30px;
        margin-top: 22px;
        height: 49px;
        font-family: "微软雅黑粗体";
        font-weight: 400;
        font-size: 57px;
        color: #FFFFFF;
      }
    }

    .contentbox {
      display: flex;
      flex-direction: row;

      .content {
        display: flex;
        justify-content: center;
        align-items: anchor-center;
        width: 1476px;
        height: 1096px;
        background-image: url("/imgs/ningbo/矩形 933 拷贝 3.png");
        background-position: left;
        background-size: 100% 100%;
        background-repeat: no-repeat;

        .img1 {
          width: 1323px;
          height: 911px;
        }
      }
    }
  }

  .box3 {
    display: flex;
    margin-left: 132px;
    display: flex;
    flex-direction: column;

    .headbox {
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      width: 2246px;
      height: 168px;
      background-image: url("/imgs/ningbo/t(1).png");
      background-position: left;
      background-size: 100% 100%;
      background-repeat: no-repeat;

      .headImg {
        margin-left: 220px;
        margin-top: 41px;
        width: 53px;
        height: 58px;
        background-image: url("/imgs/ningbo/菱形 拷贝.png");
        background-position: left;
        background-size: 100% 100%;
        background-repeat: no-repeat;
      }

      .title {
        margin-left: 30px;
        margin-top: 22px;
        height: 49px;
        font-family: "微软雅黑粗体";
        font-weight: 400;
        font-size: 57px;
        color: #FFFFFF;
      }
    }

    .contentbox {
      display: flex;
      flex-direction: row;
      gap: 40px;

      /* 圆点伪元素 */
      .content1-1 .text2::before {
        content: "";
        /* 空内容，通过样式生成圆点 */
        position: absolute;
        left: 0;
        top: 10px;
        width: 55px;
        height: 55px;
        background-image: url("/imgs/tianjin/资质.png");
        background-position: left;
        background-size: 100% 100%;
        background-repeat: no-repeat;
      }

      .content1-1 {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: 946px;
        height: 422px;
        background-image: url("/imgs/tianjin/组 3.png");
        background-position: left;
        background-size: 100% 100%;
        background-repeat: no-repeat;

        .text1 {
          text-align: center;
          width: 700px;
          font-family: "微软雅黑粗体";
          font-size: 39px;
          color: #A0EAF7;
          line-height: 69px;
        }

        .text2 {
          position: relative;
          padding-left: 50px;
          width: 800px;
          font-family: "微软雅黑常规";
          font-weight: 400;
          font-size: 30px;
          color: #FFFFFF;
          line-height: 69px;
        }
      }
    }
  }
}

.middle {
  position: absolute;
  left: 3364px;
  top: 257px;
  width: 2874px;
  height: 521px;
  background-image: url("/imgs/ningbo/矩形 606.png");
  background-position: left;
  background-size: 100% 100%;
  background-repeat: no-repeat;

  .img1 {
    position: relative;
    left: 105px;
    top: 135px;
    width: 485px;
    height: 160px;
    background-image: url("/imgs/tianjin/标记 (1).png");
    background-position: left;
    background-size: 100% 100%;
    background-repeat: no-repeat;
  }

  .img2 {
    position: relative;
    left: 800px;
    top: 20px;
    width: 1900px;
    height: 75px;
    background-image: url("/imgs/guangzhou/heng.png");
    background-position: left;
    background-size: 100% 100%;
    background-repeat: no-repeat;
  }

  .content {
    top: -136px;
    left: 732px;
    position: relative;
    width: 300px;

    .years {
      font-family: "微软雅黑常规";
      font-weight: bold;
      font-size: 29px;
      color: #D6F9FF;
      line-height: 43px;
    }

    .values {
      font-family: "微软雅黑常规";
      font-weight: 400;
      font-size: 18px;
      color: #D6F9FF;
      line-height: 29px;
    }
  }

  .content2 {
    top: -40px;
    left: 1100px;
    position: relative;
    width: 300px;

    .years {
      font-family: "微软雅黑常规";
      font-weight: bold;
      font-size: 29px;
      color: #D6F9FF;
      line-height: 43px;
    }

    .values {
      font-family: "微软雅黑常规";
      font-weight: 400;
      font-size: 18px;
      color: #D6F9FF;
      line-height: 29px;
    }
  }

  .content3 {
    top: -305px;
    left: 1495px;
    position: relative;
    width: 300px;

    .years {
      font-family: "微软雅黑常规";
      font-weight: bold;
      font-size: 29px;
      color: #D6F9FF;
      line-height: 43px;
    }

    .values {
      font-family: "微软雅黑常规";
      font-weight: 400;
      font-size: 18px;
      color: #D6F9FF;
      line-height: 29px;
    }
  }

  .content4 {
    top: -215px;
    left: 1749px;
    position: relative;
    width: 200px;

    .years {
      font-family: "微软雅黑常规";
      font-weight: bold;
      font-size: 29px;
      color: #D6F9FF;
      line-height: 43px;
    }

    .values {
      width: 326px;
      font-family: "微软雅黑常规";
      font-weight: 400;
      font-size: 18px;
      color: #D6F9FF;
      line-height: 29px;
    }
  }

  .content5 {
    top: -485px;
    left: 2004px;
    position: relative;
    width: 300px;

    .years {
      font-family: "微软雅黑常规";
      font-weight: bold;
      font-size: 29px;
      color: #D6F9FF;
      line-height: 43px;
    }

    .values {
      width: 300px;
      font-family: "微软雅黑常规";
      font-weight: 400;
      font-size: 18px;
      color: #D6F9FF;
      line-height: 29px;
    }
  }

  .content6 {
    top: -384px;
    left: 2357px;
    position: relative;
    width: 300px;

    .years {
      font-family: "微软雅黑常规";
      font-weight: bold;
      font-size: 29px;
      color: #D6F9FF;
      line-height: 43px;
    }

    .values {
      width: 300px;
      font-family: "微软雅黑常规";
      font-weight: 400;
      font-size: 18px;
      color: #D6F9FF;
      line-height: 29px;
    }
  }

  .content15 {
    display: flex;
    transform: translateX(86%);
    position: absolute;
    top: 420px;
    font-family: FZLanTingHeiS-B-GB;
    font-weight: 400;
    font-size: 53px;
    color: #FFFFFF;
    background: linear-gradient(0deg, rgba(46, 131, 183, 0.66) 10%, rgba(255, 255, 255, 1) 70%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    width: 1100px;
  }

  .content18 {
    top: 550px;
    z-index: 999;
    display: flex;
    position: absolute;
    justify-content: center;
    align-content: center;
    justify-self: anchor-center;
    /* left: 97px; */
    z-index: 999;

    .tubiao1 {
      width: 102px;
      height: 102px;
      background-image: url("/imgs/changzhou/组 7752.png");
      background-position: left;
      background-size: 100% 100%;
      background-repeat: no-repeat;
    }

    .tubiao2 {
      width: 102px;
      height: 102px;
      background-image: url("/imgs/kunming/亩.png");
      background-position: left;
      background-size: 100% 100%;
      background-repeat: no-repeat;
    }

    .tubiao3 {
      width: 102px;
      height: 102px;
      background-image: url("/imgs/tianjin/组 7752 拷贝 3.png");
      background-position: left;
      background-size: 100% 100%;
      background-repeat: no-repeat;
    }

    .tubiao4 {
      width: 102px;
      height: 102px;
      background-image: url("/imgs/tianjin/组 7752 拷贝 3(1).png");
      background-position: left;
      background-size: 100% 100%;
      background-repeat: no-repeat;
    }

    .tubiaoTitle {
      margin-left: 20px;
      margin-right: 20px;
      position: relative;
      top: -29px;
      width: auto;
      font-family: FZLanTingHeiS-B-GB;
      font-weight: 400;
      font-size: 42px;
      color: #FFFFFF;
      background: linear-gradient(0deg, rgba(46, 131, 183, 0.66) 10%, rgba(255, 255, 255, 1) 70%);
      -webkit-background-clip: text;

      .tubiaoValue {
        position: relative;
        top: 9px;
        margin-left: 20px;
        margin-right: 20px;
        font-family: YouSheBiaoTiHei;
        font-weight: 400;
        font-size: 86px;
        color: #FFFFFF;
        -webkit-text-fill-color: transparent;
        background: linear-gradient(45deg,
            transparent 35%,
            rgba(#fff, 0.6),
            transparent 65%) no-repeat,
          currentColor;
        background-size: 50%;
        -webkit-background-clip: text;
        animation: sweep 2s infinite;
        background: linear-gradient(0deg, rgba(0, 216, 255, 0.66) 10%, rgba(255, 255, 255, 1) 70%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
      }
    }
  }

  .content19 {
    display: flex;
    position: absolute;
    top: 420px;
    left: 0;
    width: 2808px;
    height: 1641px;
    background-image: url("/imgs/ningbo/中间地球 2副本.png");
    background-position: left;
    background-size: 100% 100%;
    background-repeat: no-repeat;

    .img1 {
      position: absolute;
      left: 532px;
      top: 287px;
      width: 1467px;
      height: 1199px;
      background-image: url("/imgs/ningbo/组 7764.png");
      background-position: left;
      background-size: 100% 100%;
      background-repeat: no-repeat;
    }

    .img2 {
      transform: scaleX(1);
      position: relative;
      left: 1635px;
      top: 674px;
      width: 43px;
      height: 61px;
      background-image: url("/imgs/tianjinnewenergy/形状 1381 拷贝.png");
      background-position: left;
      background-size: 100% 100%;
      background-repeat: no-repeat;
    }

    .img3 {
      z-index: 999;
      position: relative;
      left: 1595px;
      top: 666px;
      width: 34px;
      height: 45px;
      background-image: url("/imgs/ningbo/点位 (3).png");
      background-position: left;
      background-size: 100% 100%;
      background-repeat: no-repeat;
    }

    .img4 {
      position: absolute;
      left: -200px;
      top: 170px;
      width: 620px;
      height: 884px;
      background-image: url("/imgs/ningbo/CFL.png");
      background-position: left;
      background-size: 100% 100%;
      background-repeat: no-repeat;
    }

    .img5 {
      position: absolute;
      right: -200px;
      top: 170px;
      width: 620px;
      height: 884px;
      background-image: url("/imgs/ningbo/CFL.png");
      transform: scaleX(-1);
      background-position: left;
      background-size: 100% 100%;
      background-repeat: no-repeat;
    }


    .title {
      left: 1679px;
      top: 618px;
      position: absolute;
      font-family: FZLanTingHeiS-B-GB;
      font-weight: 400;
      font-size: 38px;
      color: #FFFFFF;
      background: linear-gradient(0deg, #E9DD7A 100%, #FFFFFF 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }

    .pointImg {
      position: absolute;
      top: 348px;
      left: 895px;
      width: 918px;
      height: 933px;
      background-image: url("/imgs/home/地图层 拷贝.png");
      background-position: left;
      background-size: 100% 100%;
      background-repeat: no-repeat;
    }
  }
}

.right {
  display: flex;
  position: absolute;
  flex-direction: row;
  flex-wrap: wrap;
  left: 6363px;
  top: 200px;

  .box {
    display: flex;
    flex-direction: column;

    .headbox {
      display: flex;
      height: 158px;
      width: 1246px;
      flex-wrap: nowrap;
      flex-direction: row;
      background-image: url("/imgs/ningbo/t(1).png");
      background-position: left;
      background-size: 100% 100%;
      background-repeat: no-repeat;

      .headImg {
        margin-left: 220px;
        margin-top: 41px;
        width: 53px;
        height: 58px;
        background-image: url("/imgs/ningbo/菱形 拷贝.png");
        background-position: left;
        background-size: 100% 100%;
        background-repeat: no-repeat;
      }

      .title {
        margin-left: 30px;
        margin-top: 22px;
        height: 49px;
        font-family: "微软雅黑粗体";
        font-weight: 400;
        font-size: 57px;
        color: #FFFFFF;
      }
    }

    .contentbox {
      display: flex;
      gap: 30px;
      padding: 20px;
      margin-left: 100px;
      flex-direction: row;
      flex-wrap: wrap;
    }

    .contentbox2 {
      margin-top: 10px;
      margin-bottom: 10px;
      display: flex;
      flex-direction: row;
      align-items: center;
      margin-left: 110px;
      justify-content: space-around;
      width: 2899px;
      height: 126px;
      background-image: url("/imgs/tianjin/矩形 933 拷贝 7(2).png");
      background-position: left;
      background-size: 100% 100%;
      background-repeat: no-repeat;

      .text1 {
        margin-left: -330px;
        width: 355px;
        font-family: "微软雅黑常规";
        font-weight: 400;
        font-size: 33px;
        color: #FFFFFF;
        line-height: 46px;
      }

      .text2 {
        width: 1292px;
        font-family: "微软雅黑常规";
        font-size: 36px;
        color: #FFFFFF;
        line-height: 46px;
      }
    }
  }

  .box2 {
    margin-left: 272px;
    display: flex;

    .headbox {
      display: flex;
      height: 158px;
      width: 1246px;
      flex-wrap: nowrap;
      flex-direction: row;
      background-image: url("/imgs/ningbo/t(1).png");
      background-position: left;
      background-size: 100% 100%;
      background-repeat: no-repeat;

      .headImg {
        margin-left: 220px;
        margin-top: 41px;
        width: 53px;
        height: 58px;
        background-image: url("/imgs/ningbo/菱形 拷贝.png");
        background-position: left;
        background-size: 100% 100%;
        background-repeat: no-repeat;
      }

      .title {
        margin-left: 30px;
        margin-top: 22px;
        height: 49px;
        font-family: "微软雅黑粗体";
        font-weight: 400;
        font-size: 57px;
        color: #FFFFFF;
      }
    }

    .content {
      display: flex;
      flex-wrap: wrap;
      align-content: center;
      justify-content: center;
      align-items: flex-start;
      position: absolute;
      top: 178px;
      width: 1461px;
      height: 489px;
      background-image: url("/imgs/shanghai/矩形 933 拷贝 3.png");
      background-position: left;
      background-size: 100% 100%;
      background-repeat: no-repeat;

      .img1 {
        width: 1351px;
        height: 434px;
      }

      .contentTitle {
        padding: 0 20px;
        text-align: justify;
        text-justify: inter-ideograph;
        position: relative;
        line-height: 60px;
        top: -98px;
        text-indent: 3.5ch;
        width: 1356px;
        height: 100px;
        font-family: "微软雅黑常规";
        font-weight: 400;
        font-size: 34px;
        color: #FFFFFF;
      }
    }
  }

  .box3 {
    margin-left: 76px;
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;

    .headbox {
      display: flex;
      height: 158px;
      width: 1652px;
      flex-wrap: nowrap;
      flex-direction: row;
      background-image: url("/imgs/ningbo/t(1).png");
      background-position: left;
      background-size: 100% 100%;
      background-repeat: no-repeat;

      .headImg {
        margin-left: 220px;
        margin-top: 41px;
        width: 53px;
        height: 58px;
        background-image: url("/imgs/ningbo/菱形 拷贝.png");
        background-position: left;
        background-size: 100% 100%;
        background-repeat: no-repeat;
      }

      .title {
        margin-left: 30px;
        margin-top: 22px;
        height: 49px;
        font-family: "微软雅黑粗体";
        font-weight: 400;
        font-size: 57px;
        color: #FFFFFF;
      }
    }

    .contentbox {
      margin-left: 30px;
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;

      /* gap: 100px; */
      .content1-1 .text::before {
        content: "";
        /* 空内容，通过样式生成圆点 */
        position: absolute;
        left: 0;
        top: 0px;
        width: 23px;
        height: 23px;
        background: #49B8FF;
        border-radius: 5px;
      }

      .content1-1 {

        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        gap: 30px;
        width: 696px;
        height: 417px;
        background-image: url("/imgs/tianjin/矩形 933 拷贝 7(1).png");
        background-position: left;
        background-size: 100% 100%;
        background-repeat: no-repeat;

        .text {
          position: relative;
          padding-left: 30px;
          width: 555px;
          font-family: "微软雅黑常规";
          font-weight: 400;
          font-size: 28px;
          color: #FFFFFF;
          line-height: 33px;
        }
      }

      .content1-2 {
        display: flex;
        position: relative;
        left: -163px;

        .text {
          font-family: "微软雅黑粗体";
          font-size: 36px;
          color: #49B8FF;
          position: relative;
          letter-spacing: 30px;
          top: 50px;
          left: 379px;
          transform: rotate(-70deg);
        }

        .img1 {
          display: flex;
          flex-direction: column;
          gap: 90px;
          width: 371px;
          height: 462px;
          background-image: url("/imgs/tianjin/矩形 743 拷贝 4.png");
          background-position: left;
          background-size: 100% 100%;
          background-repeat: no-repeat;

          .img1-1 {
            position: relative;
            left: 160px;
            top: 90px;
            width: 100px;
            font-family: "微软雅黑粗体";
            font-size: 25px;
            color: #FFFFFF;
          }
        }

        .content1-2-1 {
          position: relative;
          top: 70px;
          display: flex;
          flex-direction: column;
          gap: 20px;

          .text1 {
            width: 213px;
            font-family: "微软雅黑粗体";
            font-size: 25px;
            color: #FFFFFF;
          }

          .text2 {
            width: 245px;
            font-family: "微软雅黑常规";
            font-weight: 400;
            font-size: 19px;
            color: #FFFFFF;
          }
        }
      }

      .content1-3 {
        display: flex;
        flex-direction: column;
        gap: 20px;
        position: relative;
        left: -63px;

        .charts {
          display: flex;
          align-items: center;
          justify-content: center;
          width: 300px;

          .percentage-label {
            font-family: "微软雅黑常规";
            font-weight: 400;
            font-size: 25px;
            color: #FFFFFF;
            line-height: 50px;
          }

          .percentage-value {
            font-family: YouSheBiaoTiHei;
            font-weight: 400;
            font-size: 42px;
            color: #FFFFFF;
            background: linear-gradient(0deg, rgba(0, 216, 255, 0.66) 10%, rgba(255, 255, 255, 1) 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
          }
        }

        .content1-3-1 {
          display: flex;
          flex-direction: row;
          width: 420px;
          flex-wrap: wrap;
          align-items: center;

          .content1-3-1-1 {
            display: flex;
            flex-direction: column;

            .text {
              width: 210px;
              font-family: "微软雅黑常规";
              font-weight: 400;
              font-size: 25px;
              color: #FFFFFF;
            }

            .text2 {
              width: 150px;
              font-family: YouSheBiaoTiHei;
              font-weight: 400;
              font-size: 42px;
              color: #FFFFFF;
              background: linear-gradient(0deg, rgba(0, 216, 255, 0.66) 10%, rgba(255, 255, 255, 1) 100%);
              -webkit-background-clip: text;
              -webkit-text-fill-color: transparent;
            }
          }
        }
      }

      .content1-4 {
        display: flex;
        flex-direction: column;
        position: relative;
        left: -63px;

        .title {
          width: 510px;
          font-family: '微软雅黑常规';
          font-weight: 400;
          font-size: 28px;
          color: #FFFFFF;
        }

        .charts {
          width: 450px;
          height: 450px;
        }
      }

      .content1-5 {
        display: flex;
        flex-direction: column;
        align-items: center;

        .title {
          width: 436px;
          font-family: '微软雅黑常规';
          font-weight: 400;
          font-size: 31px;
          color: #FFFFFF;
        }

        .title2 {
          text-align: center;
          width: 300px;
          font-family: '微软雅黑常规';
          font-weight: 400;
          font-size: 28px;
          color: #00FFF6;
        }

        .img1 {
          width: 45px;
          height: 45px;
          background-image: url("/imgs/tianjin/资质.png");
          background-position: left;
          background-size: 100% 100%;
          background-repeat: no-repeat;
        }

        .img2 {
          width: 45px;
          height: 45px;
          background-image: url("/imgs/tianjin/资质.png");
          background-position: left;
          background-size: 100% 100%;
          background-repeat: no-repeat;
        }

        .img3 {
          width: 80px;
          height: 80px;
          background-image: url("/imgs/tianjin/资质.png");
          background-position: left;
          background-size: 100% 100%;
          background-repeat: no-repeat;
        }
      }
    }
  }
}
</style>